﻿$(window).load(function () { $(".loading").fadeOut() })
$(function () {

    echarts_2()
    echarts_3()
    echarts_4()
    echarts_5()
    echarts_6()

    function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {
                textStyle: { //图例文字的样式
                    color: '#fff',
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    color: '#FFFFFF'
                },
                splitLine: { //网格线
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#0087ED',
                        width: 1,//这里是为了突出显示加上的
                    }
                },
            },
            yAxis: {
                type: 'category',
                data: ['巴南区', '渝中区', '万州区', '丰都县', '奉节县', '潼南区', '江津区', '大足区', '忠县', '开州区', '垫江区'],
                axisLabel: {
                    color: '#FFFFFF',
                },
                axisLine: {
                    lineStyle: {
                        color: '#0087ED',
                        width: 1,//这里是为了突出显示加上的
                    }
                },
                splitLine: { //网格线
                    show: false
                }
            },
            series: [
                {
                  name: '种子公司',
                  type: 'bar',
                  stack: 'total',
                  label: {
                    show: true
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [200, 202, 201, 134, 190, 230, 120, 200, 150, 110, 470].sort((a, b) => a - b),
                  barWidth: '70%',
                  itemStyle: {
                    emphasis: {
                      barBorderRadius: 7
                    },
                    normal: {
                      barBorderRadius: [20, 0, 0, 20]
                    }
                  },
                },
                {
                  name: '肥料公司',
                  type: 'bar',
                  stack: 'total',
                  label: {
                    show: true
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [220, 132, 201, 234, 290, 330, 310, 150, 200, 89, 155].sort((a, b) => a - b),
                  itemStyle: {
                    emphasis: {
                      barBorderRadius: 7
                    },
                    normal: {
                      barBorderRadius: [0, 0, 0, 0]
                    }
                  },
                },
                {
                  name: '农机公司',
                  type: 'bar',
                  stack: 'total',
                  label: {
                    show: true
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [320, 382, 191, 334, 190, 330, 310, 200, 150, 300, 120].sort((a, b) => a - b),
                  itemStyle: {
                    emphasis: {
                      barBorderRadius: 7
                    },
                    normal: {
                      barBorderRadius: [0, 20, 20, 0]
                    }
                  },
                }
              ]          
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart3'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#dddc6b'
                    }
                }
            },
            legend: {
                textStyle: { //图例文字的样式
                    color: '#fff',
                },
                right: '2%',
            },
            grid: {
                left: '10',
                top: '20',
                right: '30',
                bottom: '10',
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 14,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }

                },

                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

            }, {

                axisPointer: { show: false },
                axisLine: { show: false },
                position: 'bottom',
                offset: 20,



            }],

            yAxis: [{
                type: 'value',
                axisTick: { show: false },
                splitNumber: 4,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 16,
                    },
                },

                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                        type: 'dotted',
                    }
                }
            }],
            series: [
    {
        name: '水稻',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                color: 'rgba(31, 174, 234, 1)',
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(31, 174, 234, 0.4)'
                }, {
                    offset: 0.8,
                    color: 'rgba(31, 174, 234, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
        },
        itemStyle: {
            normal: {
                color: '#1f7eea',
                borderColor: 'rgba(31, 174, 234, .1)',
                borderWidth: 5
            }
        },
        data: [30, 26, 33, 26, 33, 29, 33, 32, 36, 28, 33, 35, 29, 33]
    },
    {
        name: '甘薯',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                color: 'rgba(159,230,184, 1)',
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(159,230,184, 0.4)'
                }, {
                    offset: 0.8,
                    color: 'rgba(159,230,184, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
        },
        itemStyle: {
            normal: {
                color: '#9FE6B8',
                borderColor: 'rgba(159,230,184, .1)',
                borderWidth: 5
            }
        },
        data: [24,25,22,25,24,22,27,25,28,29,24,25]
    },
    {
        name: '莴苣',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                color: 'rgba(225,219,92, 1)',
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(225,219,92, 0.4)'
                }, {
                    offset: 0.8,
                    color: 'rgba(225,219,92, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
        },
        itemStyle: {
            normal: {
                color: '#FFDB5C',
                borderColor: 'rgba(225,219,92, .1)',
                borderWidth: 5
            }
        },
        data: [22,25,21,23,24,26,21,22,25,26,22,27]
    }
]


        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));
        option = {
            title: {
              text: '',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              textStyle: {
                color: 'white' // 设置图例数据名称颜色为蓝色
              }
            },
            color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],

            series: [
              {
                name: 'Extension area',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 1048, name: '玉米', label: {
                    //   color: '#5470C6' 
                    }},
                  { value: 735, name: '花生', label: {
                    //   color: '#91CC75' 
                    }},
                  { value: 580, name: '棉花', label: {
                    //   color: '#FAC858' 
                    }},
                  { value: 484, name: '西瓜', label: {
                    //   color: '#EE6666' 
                    }}
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
        option = {

            tooltip: {
                trigger: 'axis'
            },
            radar: [{
                indicator: [{
                    text: '园林',
                    max: 100
                }, {
                    text: '耕地',
                    max: 100
                }, {
                    text: '草地',
                    max: 100
                }, {
                    text: '建筑',
                    max: 100
                }, {
                    text: '其他',
                    max: 100
                }],
                textStyle: {
                    color: 'red'
                },
                center: ['50%', '50%'],
                radius: '70%',
                startAngle: 90,
                splitNumber: 4,
                shape: 'circle',

                name: {
                    padding: -5,
                    formatter: '{value}',
                    textStyle: {

                        color: 'rgba(255,255,255,.5)'
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: 'rgba(255,255,255,.05)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.05)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.05)'
                    }
                }
            },],
            series: [{
                name: '雷达图',
                type: 'radar',
                tooltip: {
                    trigger: 'item'
                },
                data: [{
                    name: '全国平均值',
                    value: [90, 50, 30, 20, 30],
                    lineStyle: {
                        normal: {
                            color: '#03b48e',
                            width: 2,
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#03b48e',
                            opacity: .4
                        }
                    },
                    symbolSize: 0,

                }, {
                    name: '重庆',
                    value: [40, 30, 75, 80, 70],
                    symbolSize: 0,
                    lineStyle: {
                        normal: {
                            color: '#3893e5',
                            width: 2,
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'rgba(19, 173, 255, 0.5)'
                        }
                    }
                }]
            },]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart6'), null, {height: 270},{width:270});
        option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: 'white'  // 设置提示框文字颜色为白色
                }
              },
            },
          
            legend: {
              data: ['每年肥料数量', '每年肥料企业数量'],
              textStyle: {
                color: 'white'  // 设置图例文字颜色为白色
              },
            },
            xAxis: [
              {
                type: 'category',
                
                data: ['2018', '2019', '2020', '2021', '2022', '2023'],
                axisPointer: {
                  type: 'shadow',
                } ,axisLine: {
                  lineStyle: {
                    color: 'white'  // 设置 x 轴轴线的颜色为白色
                  }
                },
                axisLabel: {
                  color: 'white'  // 设置 x 轴标签文本颜色为白色
                },
                
              },
            ],
            yAxis: [
              {
                type: 'value',
                name: '肥料数量',
              nameTextStyle: {
                  color: 'white'  // 设置 y 轴名称颜色为白色
                },
                min: 0,
                max: 150,
                interval: 50,
                axisLabel: {
                  formatter: '{value} kg',
                  color: 'white'  // 设置 y 轴标签文字颜色为白色
                },
                splitLine: {
                  show: false
                },
              },
              {
                type: 'value',
                name: '肥料企业数量',
                nameTextStyle: {
                  color: 'white'  // 设置 y 轴名称颜色为白色
                },
                min: 0,
                max: 300,
                interval: 50,
                axisLabel: {
                  formatter: '{value} ',
                  color: 'white'  // 设置 y 轴标签文字颜色为白色
                },
                splitLine: {
                  show: false
                },
              },
            ],
            series: [
              {
                name: '肥料数量',
                type: 'bar',
                
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' kg';
                  },
                },
                data: [20, 45, 65, 78, 96, 112],
                label: {
                  show: true,
                  color: 'white'  // 设置数据标签文字颜色为白色
                },
              },
              {
                name: '肥料企业数量',
                type: 'line',
                color:'rgba(225,219,92, 1)',
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value ;
                  },
                },
                data: [55, 58, 150, 155, 195, 235, 255],
                label: {
                  show: true,
                  color: 'white'  // 设置数据标签文字颜色为白色
                },
              },
            ],
          };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
})


















